import React, { Fragment, useEffect ,useRef} from 'react';
import ReactEcharts from 'echarts-for-react';
import {useDispatch, useSelector} from 'react-redux';
import echarts from 'echarts/lib/echarts';

import { getVideoMarkline ,getVideoClickYdata} from '../../../redux/actions';

export const DepthEchartsShow = () => {   // 接收传入的属性
  
  const depthDataa = useSelector(state => state.depthDataa);
  const docData = useSelector(state => state.docData);
  const chartZoom = useSelector(state => state.gridConfig.chartZoom);

  const dispatch = useDispatch();
  
  let arr=depthDataa.map(item=>1)

  var interval,depthInterval;
  if(docData.doc_type === "纯数据文件"){
    depthInterval = docData.interval;
  }else if(docData.doc_type === "绘图文件"){
    depthInterval = docData.docData.interval;
  }
  if(depthInterval){
    interval = (5/depthInterval) - 1;
  }else{
    interval = 49;
  }


  const ref = useRef(null);

  function initCharts(){
    var chartRef = ref.current;
    if(chartRef){

      setTimeout(() => {   // 延时10ms进行渲染echarts，可是解决 实时获取当前div大小的问题;
        var myChart = echarts.init(chartRef);
        myChart.resize();
      }, 10); 

      var myChart = echarts.init(chartRef);
      var option = {
        grid: {   // 直角坐标系内绘图网格
          // left: '30px',   // grid 组件离容器左侧的距离。
          left: '0',   // grid 组件离容器左侧的距离。
          right: '0',
          top:'0',
          bottom: '0',
          show:false
          // containLabel: true  //grid 区域是否包含坐标轴的刻度标签,true:防止标签溢出
        },
        tooltip:{
          show:true,
          trigger:'item',
          triggerOn:'click',
          formatter: (params,ticket,callback)=>{
            // console.log(depthDataa[params.dataIndex])
            if(window.localStorage.getItem('play_video')){
              console.log("红线位置",depthDataa[params.dataIndex])
              // dispatch(getVideoMarkline(depthDataa[params.dataIndex]))
              dispatch((getVideoClickYdata(depthDataa[params.dataIndex])))
            }
          }
        },
        visualMap:[{
          type:'continuous',
          min: 0,
          max: 1000,
          itemHeight:50,
          show:false,
          color:['rgba(0, 46, 81, 0.6)'],
          borderColor:'#fff'
        }],

        xAxis: {
          type: 'value',
          show: false,
          splitLine:{
            show:false
          },
          // inverse: true
        },
    
        yAxis: {
          z:2,
          offset:-50,
          type: 'category',  // category：类目轴，离散的类目数据
          inverse : true,  // 倒序
          axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
              color: "#ffffff",
              type: "solid"
            }
          },
          axisLabel: {
            interval: interval ,    // 49
            rotate: -90 ,
            fontSize: 12,
            verticalAlign:'top',
            align:"left"
          },
          axisTick: {  // 刻度线
            show: true,
          },
          boundaryGap: false,   // 坐标轴两边留白
          data: depthDataa,   // y轴数据
        },
        series:[{
            type: 'bar',
            data: arr
      
        }]
      }
      myChart.setOption(option);
    }
  }
  
  useEffect(() => {
    initCharts();
  })


  return (  
    <div className="depth-show" style={{height: ((depthDataa[depthDataa.length-1] - depthDataa[0])/5)*2*chartZoom }}> {/*  (（终深-起深）/5)*200  */}
      <div
        className="depth-echarts-show"
        ref={ref}    // 通过ref获取dom
        style={{height:'100%',width:'100%'}}
      />
    </div>  
  )
};
















// import React, { Fragment } from 'react';
// import ReactEcharts from 'echarts-for-react';
// import {useSelector} from 'react-redux';


// export const DepthEchartsShow = () => {   // 接收传入的属性
  
//   const depthDataa = useSelector(state => state.depthDataa);
//   const docData = useSelector(state => state.docData);

//   var interval,depthInterval;
//   if(docData.doc_type === "纯数据文件"){
//     depthInterval = docData.interval;
//   }else if(docData.doc_type === "绘图文件"){
//     depthInterval = docData.docData.interval;
//   }
//   if(depthInterval){
//     interval = (5/depthInterval) - 1;
//   }else{
//     interval = 49;
//   }
//   //console.log("inter",depthInterval,interval)
  
//   const option = {
//     grid: {   // 直角坐标系内绘图网格
//       left: '19px',   // grid 组件离容器左侧的距离。
//       right: '0',
//       top:'0',
//       bottom: '0',
//       containLabel: true  //grid 区域是否包含坐标轴的刻度标签,true:防止标签溢出
//     },

//     xAxis: {
//       show: false,
//     },

//     yAxis: {
//       type: 'category',  // category：类目轴，离散的类目数据
//       inverse : true,  // 倒序
//       axisLine: {
//         //show: false,
//         onZero: false
//       },
//       axisLabel: {
//         interval: interval ,    // 49
//         rotate: -90 ,
//         fontSize: 16
//       },
//       splitLine:{  // 网格线,随后删掉
//   　　　//show:true
//   　　},
//       axisTick: {  // 刻度线
//         //show: false,
//       },
//       boundaryGap: false,   // 坐标轴两边留白
//       data: depthDataa,   // y轴数据
//     },
//   };

//   return (
//     <div className="depth-show" style={{height:  ((depthDataa[depthDataa.length-1] - depthDataa[0])/5)*200 }}>       {/*  (（终深-起深）/5)*200  */}
//       <ReactEcharts
//         option={option}
//         style={{height:'100%',width:'100%'}}
//       />
//     </div>  
//   )
// };